<template>
  <!-- app-container  -->
  <div
    class="standingbook-month"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <lb-layout>
      <el-row>
        <el-col :span="24">
          <!-- <el-card class="box-card">
          <div class="box-content"> -->
          <customer :tabData="tabData"></customer>
          <!-- </div>
        </el-card> -->
        </el-col>
      </el-row>
      <el-row class="tab-area">
        <el-col :span="24">
          <el-tabs
            v-model="activeName"
            @tab-click="handleChangetab"
            class="text-tabs TTB-gutter"
          >
            <el-tab-pane
              v-for="(item, index) in tabArr"
              :key="index"
              :label="item.label"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- <el-card class="box-card box-card-ex">
          <div class="box-content"> -->
          <el-row>
            <el-col :span="24">
              <Itable @dataTotab="dataTotab"></Itable>
            </el-col>
          </el-row>
          <!-- </div>
        </el-card> -->
        </el-col>
      </el-row>
    </lb-layout>
  </div>
</template>

<script>
import Itable from "@/views/work/standingbook/month/components/tableForm.vue";
import customer from "@/views/work/standingbook/month/components/customer.vue";
export default {
  components: {
    Itable,
    customer,
  },
  data() {
    return {
      // tab
      activeName: "0",
      tabArr: [
        {
          label: "能耗资源消费情况",
          value: "0",
        },
        {
          label: "数据新机房能源消费状况",
          value: "1",
        },
      ],
      tabData: null,
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleChangetab(tab, event) {},
    dataTotab(data) {
      this.tabData = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.standingbook-month {
  width: 100%;
  ::v-deep .el-card__header {
    border-bottom: none;
  }
  .text-tabs {
    margin: 10px 0 10px -20px;
  }
  .box-card {
    .clearfix {
      height: 22px;
      width: 100%;
    }
    span {
      &:nth-child(1) {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
      }
    }
  }
  // .box-card-ex{
  //   max-height: 600px;
  //   overflow: hidden;
  //   overflow-y: auto;
  // }
}
// ::v-deep .lb_layout {
//   background: #f2f2f5;
// }
</style>
